<template>
    <div>
      <div class="buttons">
        <div style="margin-bottom: 10px">
          <Button type="success" @click="jiancha">新增检查</Button>
        </div>
      </div>
      <Table border :columns="columns1" :data="datalist">
<!--        <template slot-scope="{ row, index }" slot="state">-->
<!--            <span v-if="row.state == '0'">-->
<!--             <span>排队中</span>-->
<!--            </span>-->
<!--          <span v-if="row.state == '1'">-->
<!--             <span></span>-->
<!--            </span>-->
<!--        </template>-->
        <template slot-scope="{ row, index }" slot="action">
          <Button type="error" size="small" @click="remove(row)">删除</Button>
          <Button type="success" size="small" @click="info(row)" style="margin-left: 5px">详情</Button>
        </template>
      </Table>
      <Row v-if="loadData == true">
        <Col class="demo-spin-col" span="8" offset="8">
          <Spin fix>
            <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
            <div>数据正在加载</div>
          </Spin>
        </Col>
      </Row>
      <Page class="page_style" :total="totalnum" :current="currentPageNo"
            :page-size="currentPageSize" @on-change="changePageNo" show-total  show-sizer @on-page-size-change="size"/>
      <div>
        <Modal
          v-model="modal"
          title="新增检查"
          @on-ok="saveJiancha">
            <Form :model="formItem" :label-width="80">
              <FormItem label="区:">
                <Select v-model="searchInfo.level1" transfer="" @on-change="getMailList(JSON.parse(searchInfo.level1).id,1)" style="width: 100%;">
                  <Option :value="JSON.stringify(item)" v-for="item in mailList[0]" v-bind:key="item.id">{{item.title}}</Option>
                </Select>
              </FormItem>
              <FormItem label="街道：">
                <Select v-model="searchInfo.level2" transfer="" @on-change="getMailList(JSON.parse(searchInfo.level2).id,2)" style="width: 100%;">
                  <Option :value="JSON.stringify(item)" v-for="item in mailList[1]" v-bind:key="item.id">{{item.title}}</Option>
                </Select>
              </FormItem>
              <FormItem label="社区：">
                <Select v-model="searchInfo.level3" transfer="" @on-change="getMailList(JSON.parse(searchInfo.level2).id,3)" style="width: 100%;">
                  <Option :value="JSON.stringify(item)" v-for="item in mailList[2]" v-bind:key="item.id">{{item.title}}</Option>
                </Select>
              </FormItem>
              <FormItem label="被查人员：">
                <Input v-model="formItem.dcry" placeholder="被检查人员"></Input>
              </FormItem>
              <FormItem label="检查描述:">
                <Input v-model="formItem.dcms" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="检查描述"></Input>
              </FormItem>
            </Form>
          </Modal>
      </div>
      <Modal
        v-model="modal2"
        title="详情"
      >
        <template>
          <Form :model="formItem" :label-width="80">
            <FormItem label="区: ">
              <Input v-model="formItem.dcq" ></Input>
            </FormItem>
            <FormItem label="街道：">
              <Input v-model="formItem.dcjd" ></Input>
            </FormItem>
            <FormItem label="社区：">
              <Input v-model="formItem.dcsq"></Input>
            </FormItem>
            <FormItem label="被查人员：">
              <Input v-model="formItem.dcry" ></Input>
            </FormItem>
            <FormItem label="检查描述:">
              <Input v-model="formItem.dcms" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="检查描述"></Input>
            </FormItem>
          </Form>
        </template>
      </Modal>
    </div>
</template>

<script>
import { auditJcList, deleteInvestigationInfo, saveInvestigation, getJcInfo } from '@/api/serviceSupervision'
import { getMailLevelList } from '@/api/eventlist'
export default {
  name: 'index',
  data () {
    return {
      modal2: false,
      mailList: [],
      searchInfo: { level1: 0 },
      modal: false,
      loadData: true,
      columns1: [
        { title: '所在区', key: 'dcq' },
        { title: '所在街道', key: 'dcjd' },
        { title: '所在社区', key: 'dcsq' },
        { title: '被查人员', key: 'dcry' },
        { title: '检查时间', key: 'create_time' },
        { title: '操作',
          slot: 'action',
          width: 150,
          align: 'center' }
      ],
      datalist: [],
      totalnum: 0,
      currentPageNo: 1,
      currentPageSize: 10,
      formItem: {
        dcq: '',
        dcjd: '',
        dcsq: '',
        dcry: '',
        dcms: ''
      }
    }
  },
  methods: {
    jiancha () {
      this.modal = true
      this.formItem = {}
    },
    info (row) {
      getJcInfo({ id: row.id }).then(res => {
        if (res.data.errcode === 0) {
          this.formItem = res.data.data
          this.modal2 = true
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: '获取信息失败' })
        }
      })
    },

    getMailList (id, index) {
      if (this.searchInfo.level1) {
        this.formItem.dcq = JSON.parse(this.searchInfo.level1).whole_address
        // console.log(this.formItem.qu)
      }
      if (this.searchInfo.level2) {
        this.formItem.dcjd = JSON.parse(this.searchInfo.level2).whole_address
      }
      if (this.searchInfo.level3) {
        this.formItem.dcsq = JSON.parse(this.searchInfo.level3).title
      }
      if (id === 0) {
        this.mailList[index] = []
        this.searchInfo['level' + (index + 1)] = ''
        return
      }
      getMailLevelList({ id: id }).then(res => {
        if (res.data.errcode === 0) {
          this.mailList[index] = res.data.data
          this.mailList[index].unshift({ id: 0, title: '全部' })
          this.$forceUpdate()
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: '查询区域列表信息失败' })
        }
      })
    },
    remove (row) {
      deleteInvestigationInfo({ id: row.id }).then(res => {
        if (res.data.errcode === 0) {
          this.$Notice.success({ title: '删除成功' })
          this.changePageNo()
        } else {
          this.$Notice.error({ title: res.data.errmsg })
        }
      })
    },
    saveJiancha () {
      saveInvestigation(this.formItem).then(res => {
        if (res.data.errcode === 0) {
          this.$Notice.success({ title: '创建成功' })
          this.changePageNo()
        } else {
          this.$Notice.error({ title: res.data.errmsg })
        }
        console.log(res)
      })
    },
    changePageNo (pageSize) {
      console.log(pageSize)
      this.currentPageNo = pageSize
      this.init()
    },
    size (pageSize) {
      this.currentPageSize = pageSize
      this.changePageNo()
    },
    init () {
      let data = {
        pageNo: this.currentPageNo,
        pageSize: this.currentPageSize
      }
      auditJcList(data).then(res => {
        if (res.data.errcode === 0) {
          this.datalist = res.data.data.results
          this.totalnum = res.data.data.totalRecord
          this.loadData = false
        }
      })
    }
  },
  mounted () {
    this.init()
    this.getMailList(null, 0)
  }
}
</script>

<style scoped>
  .page_style {
    margin-top: 10px;
    text-align: right;
  }
  .buttons{
    display: flex;
    margin-left: 10px;
  }
</style>
